<template>
  <div class="updatePhone">
    <up-form
      labelPosition="left"
      labelWidth="150rpx"
      labelStyle="font-size:28rpx;"
      customStyle="margin:0"
      :model="updatePhone"
    >
      <up-form-item label="原手机号" prop="oldPhone" borderBottom>
        <up-input
          v-model="updatePhone.oldPhone"
          border="none"
          placeholder="请输入原手机号"
        ></up-input>
      </up-form-item>
      <up-form-item label="新手机号" prop="newPhone" borderBottom>
        <up-input
          v-model="updatePhone.newPhone"
          border="none"
          placeholder="请输入新手机号"
        ></up-input>
      </up-form-item>
      <up-form-item label="验证码" prop="msgCode" borderBottom>
        <up-input
          v-model="updatePhone.msgCode"
          border="none"
          placeholder="请输入验证码"
        >
          <template #suffix>
            <div class="getCode" @click="getCode">
              {{ isSend ? "已发送" : "获取验证码" }}
            </div>
          </template>
        </up-input>
      </up-form-item>
    </up-form>
  </div>
  <div class="update" @click="okUpdate">确认换绑</div>
  <img src="./img/bg_shoujibangding.png" alt="" class="bg" />
</template>

<script setup>
import { ref, reactive } from "vue";
import * as utils from "../../utils/utils";
import * as http from "../../utils/http";
const updatePhone = reactive({
  oldPhone: "",
  newPhone: "",
  msgCode: "",
});
// 是否发送
const isSend = ref(false);
// 发送短信验证码定时器
let nums = 60;
// 发送短信验证码
const getCode = () => {
  if (!isSend.value) {
    if (
      utils.checkMobile(updatePhone.oldPhone) &&
      utils.checkMobile(updatePhone.newPhone)
    ) {
      http.sendSmsCode({ custPhone: updatePhone.newPhone }).then((res) => {
        isSend.value = true;
        let timer = setInterval(() => {
          nums--;
          if (nums < 0) {
            isSend.value = false;
            nums = 60;
            clearInterval(timer);
          }
        }, 1000);
        wx.showToast({
          title: "已发送",
          mask: "true",
          icon: "none",
          duration: 1000,
        });
      });
    } else {
      wx.showToast({
        title: "请您正确填写手机号",
        mask: "true",
        icon: "none",
        duration: 1000,
      });
    }
  } else {
    wx.showToast({
      title: "请您" + nums + "s后再试",
      mask: "true",
      icon: "none",
      duration: 1000,
    });
  }
};
// 确认换绑
const okUpdate = () => {
  if (
    utils.checkMobile(updatePhone.oldPhone) &&
    utils.checkMobile(updatePhone.newPhone) &&
    updatePhone.msgCode
  ) {
    http
      .phoneExchangeBind({
        originalPhone: updatePhone.oldPhone,
        newPhone: updatePhone.newPhone,
        smsCode: updatePhone.msgCode,
      })
      .then((res) => {
        wx.showToast({
          title: "修改成功,稍等跳转",
          mask: "true",
          icon: "none",
          duration: 1000,
        });
        wx.removeSorageSync("token");
        setTimeout(() => {
          wx.reLaunch({
            url: "./login/login",
          });
        }, 1000);
      });
  }
};
</script>

<style scoped lang="scss">
.updatePhone {
  padding: 0 50rpx;
}
.getCode {
  color: #406eb0;
}
.update {
  width: 590rpx;
  height: 88rpx;
  margin: 200rpx 80rpx;
  border-radius: 44rpx;
  line-height: 88rpx;
  text-align: center;
  background-image: linear-gradient(to right, #619df1, #4478c1);
  color: #fff;
  font-size: 32rpx;
}
.bg {
  width: 750rpx;
  height: 1160rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -999;
}
</style>
